import {useState} from 'react'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
import './index.css'

export default function TodoHook() {
  const [todos, setTodos] = useState(
    [
      {id: 1, name: '打牌', done: false},
      {id: 2, name: '烫头', done: false},
      {id: 3, name: '洗澡', done: false},
      {id: 4, name: '工作', done: false}
    ]
  )

  function handleAddTodo(todoObj) {
    const newTodos = [todoObj, ...todos]
    setTodos(newTodos)
  }

  function changeTodo(id, done) {
    const newTodos = todos.map(todo => {
      if (todo.id === id) {
        todo.done = done
        return todo
      } else {
        return todo
      }
    })
    setTodos(newTodos)
  }

  function deleteTodo(id) {
    const newTodos = todos.filter(todo => {
      return todo.id !== id
    })
    setTodos(newTodos)
  }

  function handleCheckAll(val) {
    const newTodos = todos.map(todo => {
      todo.done = val
      return todo
    })
    setTodos(newTodos)
  }

  function clearDoneTodos() {
    const newTodos = todos.filter(todo => {
      return !todo.done
    })
    setTodos(newTodos)
  }

  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header handleAddTodo={handleAddTodo}/>
        <List todos={todos} changeTodo={changeTodo} deleteTodo={deleteTodo}/>
        <Footer todos={todos} handleCheckAll={handleCheckAll} clearDoneTodos={clearDoneTodos}/>
      </div>
    </div>
  )
}
